<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始vue.js</title>
    <link rel="stylesheet" href="../bootstrap-4.6.2-dist/./css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        {{username}}
        <p v-text="username"></p>
        <p v-text="gender"></p>
        <hr>
        <p>{{ username }}</p>
        <p>{{ gender }}</p>
        <hr>
        <div v-html="info" ></div>
        <hr>
        <input type="text"  v-bind:placeholder="username">
        <p>{{ count }}</p>
        <button @click="add(2,$event)">+1</button>
        <hr>
        <input type="text" @keyup.delete="clearinput" v-model="textvalue">
        <input type="text" :value="textvalue">
        <hr>
        <select v-model="city">
            <option value="">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <p>{{ city }}</p>
        <input type="text" :value="city">
        <hr>
        <div v-if="type==='A'">优秀</div>
        <div v-if="type==='B'">良好</div>
        <div v-if="type==='C'">一般</div>
        <hr>
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>index</th>
                <th>ID</th>
                <th>name</th>
            </thead>
            <tbody>
                <tr v-for="(index,item) in list">
                    <td>{{ index}}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

<!-- vue引入 -->
<script src="vue.js"></script>
<script>
    const vm  = new Vue({
        // el属性固定写法，表示当前vm示例要控制页面上的那个区域
        el:'#app',
        data() {
            return {
                // data对象就是要渲染到页面上的数据
                username :'张三',
                gender:'女',
                info:'<div style="color: red;"> 你好</div>',
                count:0,
                backguround:'',
                textvalue:'',
                city:'',
                type:'C',
                list:[
                {id:1,name:'张三'},
                {id:2,name:'张四'},
                {id:3,name:'张五'},
            ]
            }
          
        },
        methods: {
            add(n,e){
                console.log(e);
                this.count+=n;
                if(this.count%2==0){
                    e.target.style.backgroundColor='red'
                }else{
                    e.target.style.backgroundColor=''
                }
            },
            clearinput(e){
                e.target.value=''
            }
        },
    })
</script>
</html>